<template>
  <div style="padding: 50px">
    <upload-excel-component
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
    <div style="margin: 0 auto; width: 400px; text-align: center">
      <div style="margin: 0 auto; margin: 10px">
        <span style="font-size: 18px">{{ uploadFileName }}</span>
      </div>
      <el-button type="plain" @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleUpload">上传</el-button>
    </div>

    <div v-if="uploadFileName">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          v-for="item of uploadHeader"
          :key="item"
          :prop="item"
          :label="item"
        />
      </el-table>
      <el-pagination
        style="text-align: center; margin-top: 10px; margin-bottom: 50px"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { excelGradDirection } from '@/api/graduation.js'

export default {
  components: { UploadExcelComponent },
  data() {
    return {
      currentPage: 1,//当前所处的页数
      pageSize: 20,//每页多少条数据
      total: 1,//数据总数
      tableData: [],//显示在表格中的数据
      uploadFileName: '',//文件名
      uploadData: [],//文件中的数据
      uploadHeader: [],//文件的表头
    }
  },
  methods: {
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 5

      if (isLt1M) {
        this.uploadFileName = file.name
        return true
      }

      this.$message({
        message: '不要上传超过5M的Excel文件噢.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      this.uploadData = results
      this.uploadHeader = header
      this.total = this.uploadData.length
      this.currentPage = 1
      const max = (this.total > this.currentPage * this.pageSize) ? this.currentPage * this.pageSize : this.total;
      this.tableData = this.uploadData.slice((this.currentPage - 1) * this.pageSize, max - 1)
    },
    handleCurrentChange(val) {
      let max = (this.total > val * this.pageSize) ? val * this.pageSize : this.total
      this.tableData = this.uploadData.slice((val - 1) * this.pageSize, max - 1)
    },
    handleCancel() {
      this.$confirm('此操作将放弃当前所有操作，确定取消上传嘛？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用全局挂载的方法
        this.$store.dispatch('tagsView/delView', this.$route)
        // 返回上一步路由
        this.$router.push('/graduation/index')
      }).catch(() => {
        //do nothing
      });
    },
    handleUpload() {
      //上传给后端
      let data = {
        list: this.uploadData
      }

      excelGradDirection(data).then(response => {
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        // 调用全局挂载的方法
        this.$store.dispatch('tagsView/delView', this.$route)
        // 返回上一步路由
        this.$router.push('/graduation/index')
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
